<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    // function getMsg(msg){
    //     console.log(msg)
    // }
    function App() {
        /* 
         子组件向父组件传值：
         1. 在父组件中的子组件标签上绑定一个自定义属性 自定义属性值必须为函数类型;
         2. 在子组件中使用this.props调用自定义属性函数并传值
        */
        return (
            <div>
                <h1>我是一个父组件</h1>
                <Child getMsg={(msg) => {
                    console.log(msg)
                }} getNum={(n)=>{
                    console.log("我调用了",n)
                }}/>
            </div>
        )
    }
    function Child(props) {
        console.log(props)
        let { getMsg,getNum} = props;
        let msg = '好好学习天天向上'
        let num = 100;
        return (
            <div>
                <h2>我是一个子组件</h2>
                <button onClick={() => {
                    getMsg(msg)
                    getNum(num)
                }}>向父组件传值</button>
            </div>
        )
    }
    ReactDOM.render(<App />, document.getElementById("root"));
</script>

</html>